The Template Manager Styles screen is new to Joomla 1.6. It allows you to manage template styles which you can then apply to your Joomla installation. You can specify the default style to be applied to web pages in the public and administrator interfaces. You can also configure different styles for the various menu item web pages on your site.
Styles allow to you have multiple different configurations of a template saved and then apply them on a whole website or accordingly website per pages.
To open template manager, first of all login in Joomla Administrator Panel and go to Extensions -> Template Manager.
This screen will display by default templates list which has been providing by joomla software. You may use either these template for website or you have made your own custom template.
In this article I’m going to explain you how could you made your own custom template and how could you add default or custom module in this template.
So first of all you should have understood some points which are mandatory for making a custom template. Before proceeding for making a custom template, you should have a directory where you could puts your template files. Here I’m creating a directory with name ‘MyTemplate’ and within it I shall put my templates files.
Now for custom template, you have to create two important file: ‘index.php’ file and ‘templateDetails.xml’ file. XML file is basically treated as installer file of custom template in joomla software. These files have some specified formatting. Let’s take a look of formatting structure of ‘templateDetail.xml’ file.
‘templateDetails.xml’ files Code:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE install PUBLIC "-//Joomla! 1.7//DTD template 1.0//EN" "http://dev.joomla.org/xml/1.5/template-install.dtd">
<install version="1.7" type="template">
<name>MyTemplate</name>
<creationDate>26-01-2012</creationDate>
<author>Arun Kumar Singh</author>
<authorEmail>myusername@domain.com</authorEmail>
<authorUrl>http://mindstick.com</authorUrl>
<copyright>mindstick 2010</copyright>
<license>GNU/GPL</license>
<version>1.0.0</version>
<description>My Template</description>
<files>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>
<folder>CSS</folder>
<folder>Image</folder>
</files>
<positions>
<position>top</position>
<position>content</position>
<position>positon-2</position>
<position>positon-3</position>
<position>positon-4</position>
<position>positon-5</position>
<position>positon-6</position>
<position>positon-7</position>
<position>positon-8</position>
<position>footer</position>
</positions>
</install>
This is installer file which have all information related to your template such as files name, folder name, template positions name etc.
Now you have to create ‘index.php’ files. For index file write down following code and save it with ‘index.php’ name.
‘index.php’ files Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language;?>" >
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/mytemplate/CSS/template.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl?>/templates/mytemplate/CSS/Positions.css" type="text/css"/>
<link rel="stylesheet" href="<?php echo $this->baseurl?>/templates/mytemplate/CSS/login.css" type="text/css" />
</head>
<body>
<div id="header" > <!-- Start Head Tag -->
<div class="logo">
<img src="<?php echo $this->baseurl ?>/templates/mytemplate/Image/logo.png" title="Mindstick" alt="Mindstick"></img>
</div>
</div><!--End Header Tag -->
<div class="position1">
</div>
<div class="position2"> <jdoc:include type="modules" name="position-2" title="Breadcrumbs" /> </div>
<div class="position3"> <jdoc:include type="modules" name="position-7" title="Menus" /> </div>
<div class="position4"> </div>
<div class="position5"><div id="banner">MyBanner</div> <jdoc:include type="modules" name="position-4" title="MyBanner" /> </div>
<div class="position6"> <jdoc:include type="modules" name="position-3" title="LoginForm" /> </div>
<div class="position7"></div>
<div class="position8"> <jdoc:include type="component" /> </div>
<div class="footer"></div>
</body>
</html>
Note: To include module, component, plugins etc in your custom template, you have to use following tag:
<jdoc:include type=”type_name” position=”position_name” title=”title_name” />
This tag is used to add/include modules in your template. ‘index.php’ template files having three CSS file; template, position and login. Let’s take a look of these files code one by one.
‘template.css’ files code:
/*
Document : template
Created on : Jan 30, 2012, 1:46:41 PM
Author : Arun Kumar Singh
Description:
Purpose of the stylesheet follows.
*/
/*
TODO customize this sample style
Syntax recommendation http://www.w3.org/TR/REC-CSS2/
*/
body {
background: white;
color: Balck;
font-family: calibri, helvetica, sans-serif;
}
h1{
color: Balck;
font-weight: bold;
}
#header
{
margin: 0px 50px 0px 50px;
background-image: url(../Image/Header.png);
background-repeat: repeat-x; border-bottom: 5px solid orange;
width: 1200px;
height: 140px;
}
.logo
{
margin: 20px 0px 0px 20px;
width: 300px;
height: 154px;
}
#imgHeader
{
width: 1000px;
height: 154px;
}
#banner{
width:201px;
background-color: orange;
border: 2px solid blue;
text-align: center;
}
ul.menu li
{
padding-top: 2px;
text-align: center;
background-image: url(../Image/Menus.png);
background-repeat: no-repeat;
list-style-type: none;
width : 200px;
height: 33px;
}
ul.menu li a
{
padding-top: 2px;
font-size: 16px; color: white; font-weight: bold;
text-decoration: none;
}
ul.menu li:hover
{
background-position: 0 -33px;
height: 33px;
}
ul.menu
{
vertical-align: middle;
}
.item-page
{
text-align: justify;
}
ul.actions
{
margin: 20px 0px 0px 550px;
text-decoration: none;
list-style-image: none;
}
ul.actions li a
{
margin: 0px;
text-decoration: none;
}
ul.pagenav li a
{
text-decoration: none;
}
.item-page ul li
{
text-decoration: none;
list-style-type: none;
}
‘positions.css’ files code:
/*
Document :Postions
Created on : Jan 31, 2012, 2:39:36 PM
Author : Arun Kumar Singh
Description: Purpose of the stylesheet follows.
*/
/*
TODO customize this sample style
Syntax recommendation http://www.w3.org/TR/REC-CSS2/
*/
.position1
{
float:right;
margin: 5px 80px 0px 0px;
width:200px;
height:40px;
}
.position2
{
margin-left:50px;
margin-top:5px;
width: 300px;
height:30px;
}
.position3
{
margin:15px 0px 0px 16px;
width:200px;
height: 170px;
}
.content
{
margin:0px 0px 0px 300px;
height:100px;
width: 200px;
}
.position4
{
position:absolute;
margin:-220px 0px 0px 360px;
width:300px;
height :50px;
}
.position5
{
margin: 20px 0px 0px 50px;
width:205px;
height:200px;
}
.position6
{
float:right;
margin:-350px 70px 0px 0px;
width:280px;
height:260px;
}
.position7
{
float:right;
margin: -80px 70px 0px 0px;
width:280px;
height:200px;
}
.position8
{
margin: -360px 0px 0px 270px;
width:680px;
min-height:500px;
}
.footer
{
margin: 30px 50px 0px 50px;
overflow: hidden;
height: 115px;
width: 1198px;
background-image: url(../Image/footer.png);
background-repeat: no-repeat;
border-top: 5px solid orange;
}
‘login.css’ files code:
/*
Document :login
Created on : Feb 1, 2012, 4:09:35 PM
Author : Arun Kumar Singh
Description: Purpose of the stylesheet follows.
*/
/*
TODO customize this sample style
Syntax recommendation http://www.w3.org/TR/REC-CSS2/
*/
body
{
font-family: calibri, helvetica, sans-serif;
}
#login
{
background-image: url(../Image/login-background.png);
background-repeat: no-repeat;
height: 303px;
width: 293px;
}
#tblLogin
{
margin: 20px 0px 0px 20px;
}
.logo
{
width: 150px;
height: 66px;
margin: 10px 0px 0px 10px;
}
.button{
text-align: right;
}
btnTd:hover
{
color: gray;
}
#footer
{
margin: 15px 0px 0px 10px;
}
#footer a
{
color: blue;
}
#footer a:hover
{
color: blueviolet;
}
#footer td
{
width: 130px;
}
#msgError
{
margin: 20px 0px 0px 10px;
}
#msgError label
{
color: red;
font-weight:bold;
}
Now putting all these files into recently created directory ‘MyTemplate’ and make its zip folder.
Now it’s time to upload zip folder in joomla software, to do it first of all login in Joomla Administrator Panel go to Extensions -> Extension Manager.
Here browse your file by clicking on ‘Browse’ button and then click ‘Upload & Install’ button.
Now, go to Extensions -> Template Manager and check out your template name.
In this screen, you have two thing; Styles and Templates. In style section you can perform some actions such as Make Default, Edit, Duplicate, Delete etc by using toolbar buttons.
Now, select your template by using adjacent checkbox and click on ‘Make Default’ button.
Now your template set as by default template in your website. If you want to perform some changes in template, click on ‘Template’ tag and find out your template in template list.
Now click on your template name and find out your main page and CSS files.
To edit these files code just click on that file name which would you change. Suppose here I want to change template.css file, to do it just click on template.css file name and change the code whatever you want.
Here I have make some changes in this file and click on ‘Save & Close’ button.
Your changes have been saved successfully. Now to view your website just click on ‘View Site’ link, this is at top of Joomla Administrator Panel.
This is the complete description on how to create customize template in joomla. I hope it might be useful for you.
Leave Comment